<template>
  <el-dialog
    v-model="isShowDialog"
    :before-close="handleClose"
    title="收货明细"
    draggable
    width="60%"
    append-to-body
  >
    <div class="text__box">
      <div class="text_item">
        <span class="erpLabel">入库单号：</span>
        <span>{{ receiptCode }}</span>
      </div>
      <div class="text_item">
        <span class="erpLabel">订单类型：</span>
        <span>{{ returnDictLabel(receipt_type, receiptType) }}</span>
      </div>
    </div>

    <vxe-table
      ref="tableRef"
      border
      show-overflow
      align="center"
      :data="tableList"
      height="500"
      :row-config="{ isCurrent: true, isHover: true }"
      show-footer
      :footer-method="footerMethod"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="skuCode" width="220" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{ row }">
          <ImagePreview
            v-if="row.coverUrl"
            :width="150"
            :height="50"
            :src="row.coverUrl"
          ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="totalNum" width="120" title="应收数量"></vxe-column>
      <vxe-column field="receiptNum" width="120" title="实收数量"></vxe-column>
      <vxe-column
        field="qcPassNum"
        width="120"
        title="质检正品数量"
      ></vxe-column>
      <vxe-column
        field="skuPrintNum"
        width="140"
        title="商品标签打印数量"
      ></vxe-column>
    </vxe-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { receiptRecordDetail } from "@/api/scApi";
import { getCurrentInstance, onMounted, ref } from "vue";

import ImagePreview from "@/components/ImagePreview/index.vue";

const { proxy } = getCurrentInstance();
const { receipt_type } = proxy.useDict("receipt_type");
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
  receiptId: { type: String },
});

const emits = defineEmits(["cancel"]);

function handleClose() {
  emits("cancel");
}

const receiptCode = ref("");
const receiptType = ref("");
let tableList = ref([]);

function getList() {
  receiptRecordDetail({
    receiptId: props.receiptId,
  }).then((res) => {
    if (res.code === 200) {
      tableList.value = res.data.details;
      receiptCode.value = res.data.receiptCode;
      receiptType.value = res.data.receiptType;
    }
  });
}

const sumNum = (list, field) => {
  let count = 0;
  list.forEach((item) => {
    if (item[field]) {
      count += Number(item[field]);
    }
  });
  return count;
};

function footerMethod({ columns, data }) {
  return [
    columns.map((column, columnIndex) => {
      if (columnIndex === 0) {
        return "合计";
      }
      if (
        ["totalNum", "receiptNum", "qcPassNum", "skuPrintNum"].includes(
          column.field
        )
      ) {
        return sumNum(data, column.field);
      }
      return null;
    }),
  ];
}

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.text__box {
  display: flex;
  margin: 10px 0;
  .text_item {
    margin-right: 10px;
  }
}
</style>
